<template>
  <div id="comboGroupDetail">
    <!-- 套餐组数据 -->
    <el-card>
      <div class="header">
        <h3>{{ detail.title }}</h3>
        <div class="editButton" v-if="$api.buttonPower(62)">
          <el-button type="success" @click="addCombo()">添加套餐</el-button>
          <el-button type="primary" @click="setOpen" v-if="$api.buttonPower(62)">编辑</el-button>
          <el-button @click="changeStatus('停用', $api.Enum.StatusDisable)" v-if="detail.status === $api.Enum.StatusActive">停用</el-button>
          <el-button @click="changeStatus('激活', $api.Enum.StatusActive)" v-if="detail.status === $api.Enum.StatusDisable">激活</el-button>
          <el-button @click="changeStatus('删除', $api.Enum.StatusDelete)" v-if="detail.status === $api.Enum.StatusDisable">删除</el-button>
        </div>
      </div>

      <el-descriptions :colon="false" label-class-name="dialogLabel" :column="2">
          <el-descriptions-item v-for="(item, index) in group_fields" :key="index" :label="item.label" v-if="item.show_rule(detail)">
            <div v-if="item.prop=='status'" v-html="$api.status.status(detail.status, option[$api.Enum.DicTypeStatus])"></div>
            <div v-else>{{detail[item.prop] }} {{item.remark}}</div>
          </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 套餐数据 -->
    <div class="comboList">
      <div>
        <h4>包含套餐</h4>
      </div>
      <div v-if="!combo_list.length > 0">
        <myEmpty></myEmpty>
      </div>
      <el-tabs v-model="active_name">
        <el-tab-pane label="月套餐" name="combo">
          <div v-for="item in combo_list" :key="item.id" class="comboDetail">
            <el-descriptions  :title="item.name" :column="3" border v-if="item.combo_type_name == '月套餐'">
              <el-descriptions-item label="流量">{{ item.flow }}</el-descriptions-item>

              <el-descriptions-item label="套餐类型">{{ item.package_type_name }}</el-descriptions-item>

              <el-descriptions-item label="状态">{{ item.status_name }}</el-descriptions-item>

              <el-descriptions-item label="标题">{{ item.title }}</el-descriptions-item>

              <el-descriptions-item label="语音">{{ item.voice }}</el-descriptions-item>

              <el-descriptions-item label="短信">{{ item.sms }}</el-descriptions-item>

              <el-descriptions-item label="生效月份">{{ item.effect_month }}</el-descriptions-item>

              <el-descriptions-item label="创建时间">{{ item.create_dt }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="扩容包" name="package">
          <div v-for="item in combo_list" :key="item.id" class="comboDetail">
            <el-descriptions :title="item.name" :column="3" border v-if="item.combo_type_name == '扩容包'">
              <el-descriptions-item label="流量">{{ item.flow }}</el-descriptions-item>

              <el-descriptions-item label="套餐类型">{{ item.package_type_name }}</el-descriptions-item>

              <el-descriptions-item label="状态">{{ item.status_name }}</el-descriptions-item>

              <el-descriptions-item label="标题">{{ item.title }}</el-descriptions-item>

              <el-descriptions-item label="语音">{{ item.voice }}</el-descriptions-item>

              <el-descriptions-item label="信息">{{ item.sms }}</el-descriptions-item>

              <el-descriptions-item label="生效月份">{{ item.effect_month }}</el-descriptions-item>

              <el-descriptions-item label="创建时间">{{ item.create_dt }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-drawer title="套餐组编辑" :visible.sync="is_set" direction="rtl" size="80%" :wrapperClosable="false" :before-close="setClose" append-to-body>
      <iot-combo-group-set v-if="is_set" :detail="detail" @close="setClose"></iot-combo-group-set>
    </el-drawer>
  </div>
</template>

<script>
import IotComboGroupSet from "@/components/iotCard/combo/addComboGroup";
export default {
  name: 'IotComboGroupDetail',
  components: {IotComboGroupSet},
  props:{
    data_id: Number,
  },
  data() {
    return {
      detail: {},
      option: [],
      combo_list: [],
      active_name: 'combo',
      group_fields: [
        { label: '所属应用商', prop: 'agent_app_name', show_rule:function (){return true}},
        {label: '状态', prop: 'status', show_rule:function (){return true}},
        { label: '主套餐类型', prop: 'main_package_type_name' , show_rule:function (){return true}},
        { label: '流量倍率', prop: 'flow_ratio' , show_rule:function (){return true}},
        { label: '周期类型', prop: 'cycle_mode_name' , show_rule:function (){return true}},
        { label: '语音倍率', prop: 'voice_ratio' , show_rule:function (){return true}},
        { label: '流量类型', prop: 'flow_type_name' , show_rule:function (){return true}},
        {label:'超池行为', prop: 'excess_pool_action_name' , show_rule: function(detail){return detail.flow_type === 2}},
        { label: '基础流量', prop: 'base_flow' , remark:'MB', show_rule: function (detail){console.log(detail);return detail.flow_type === 2}},
        {label: '超量行为', prop: 'excess_card_action_name', show_rule: function(detail){return detail.flow_type === 2}},
        { label: '销售模式', prop: 'sale_mode_name' , show_rule:function (){return true}},
        { label: '运营模式', prop: 'operating_mode_name' , show_rule:function (){return true}},
        { label: '创建日期', prop: 'create_dt' , show_rule:function (){return true}},
      ],
      is_set: false,
      is_change: false,
    };
  },
  watch:{
    data_id:{
      immediate: true, // 解决首次负值不触发的情况
      handler: function (newVal,oldVal){
        if (newVal){
          this.getDetail()
          this.getComboList()
        }
      },
    }
  },

  mounted() {
    this.$api.foundation.dicListExtendCache([this.$api.Enum.DicTypeStatus], {}, res => {
      this.option = res;
    });
  },
  // 销毁之前
  beforeDestroy() {
      this.$emit('close',{is_change: this.is_change})
  },

  methods: {
    getDetail() {
      this.$api.combo.groupDetail({id: this.data_id}, res => {
        if (!res.status) {
          this.$router.go(-1);// 观察一下作用
          return this.$message.error(res.message);
        }
        this.detail = res.data;
      });
    },
    getComboList() {
      this.$api.combo.comboList({group_id: this.data_id}, res => {
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.combo_list = res.data.list
      });
    },

    setOpen() {
      this.is_set = true
      this.is_change = true
    },
    setClose(){
      this.is_set=false
      this.getDetail()
    },

    changeStatus(text, status) {
      this.$confirm(`确定${text}该套餐组?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.combo.groupChangeStatus({id: this.detail.id, status: status}, res => {
          if (!res.status) {
            return this.$message.error(res.message)
          }
          this.$message.success("操作成功!");
          this.is_change = true
          if (status == this.Enum.StatusDelete){
            this.$message.success('删除成功!')
            return this.$destroy();
          }
          this.getDetail()
        });
      })
    },
    // 添加套餐弹窗
    addCombo() {
      window.sessionStorage.setItem("addComboId", this.detail.id);
      let routeData = this.$router.resolve({path: "/addCombo", query:{group_id: this.detail.id}});
      window.open(routeData.href, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
#comboGroupDetail {
  padding: 0 20px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .el-descriptions {
    margin-top: 20px;
  }

  .comboList {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    margin-top: 15px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .el-tab-pane {
      padding: 10px;
    }

    .el-descriptions {
      border-radius: 4px;
      //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
      border: 1px solid #ebeef5;
      padding: 10px;
      margin-top: 15px;
    }

    div {
      width: 100%;
      text-align: center;
    }
  }
}
</style>